import React,{Component} from 'react';
import PropTypes from 'prop-types';
import './template.less';
const prefix = 'template';
class Template extends Component{
    render(){
        let {title,titleColor,background} = this.props;
        let backStyle = (function () {
            if(background.match(/#[A-Z,a-z,0-p]+/g)){
               return background;
            }else{
                return `url(${background}) no-repeat center`;
            }
        })();
        return(
            <div className={prefix} style={{background:backStyle}}>
                <div className={prefix+"-container"}>
                    <h1 style={{color:titleColor}}>
                        <i className='cover' style={{background:titleColor}}></i>
                        {title}
                    </h1>
                    {this.props.children}
                </div>
            </div>
        )
    }
};
export default Template;
Template.propTypes = {
  title:PropTypes.string.isRequired,
    titleColor:PropTypes.string.isRequired,
    background:PropTypes.any
};
Template.defaultProps = {
    background:'#fff'
};